<template>
  <article class="about" id="content">
    <h3 style="color: red">目录</h3>
    <section id="menu">
      <!-- 平铺第一层子节点 -->
      <div class="vocabulary_class" v-for="(item,index) in data_all" :key="index">
      <h4>{{ item['name'] }}</h4>
      <ol class="first_level_node">
        <li v-for="page in data_page[item.node_id]" :key="page[0]">
          <a :href="page[2]">{{page[1]}}</a>
        </li>
      </ol>
      <treeMenu v-bind:list="item['children']" :data_page="data_page" ></treeMenu>
      </div>
    </section>
  </article>
</template>

<script>
import axios from "axios";
import treeMenu from "@/components/Treenode.vue";
import {useOfflineData} from '@/assets/offline-data.js';
// import {useOfflinePage} from '@/assets/offline-page.js';
import "@/assets/css/index.css";
import "@/assets/css/menu_link.css";
// import Edit from "../components/Edit.vue";

export default {
  components: { treeMenu },
  name: 'About',
  data() {
    return {
      data_all:[],
      data_page:[],
    }
  },
  methods: {
    getData() {
      var that = this;  //缓存组件指针
      // 实例化axios请求
      const requireA = axios.create({
        baseURL: "",
      });
      requireA({
        url: "/apiAll",
        method:'GET'
      }).catch(function (error) {
        if (error.response) {
          // 请求已发出，但服务器响应的状态码不在 2xx 范围内
          // console.log(error.response.data);
          console.log('数据请求失败',error.response.status);
          // console.log(error.response.headers);
        } else {
          console.log('Error', error.message);
        }
        console.log(error.config);
      }).then((res) => {
        if (res) {
          // console.log(res, "res", isNaN(res));
          var data = res['data']
          console.log('sql数据获取成功')
          var pages = data['pages'];
          // var cate_list = res["data"]['cate_list'];
          console.log('页面信息获取成功')
        }else{
          console.log('sql连接失败,获取离线数据')
          var data = useOfflineData();
          var pages = data['pages'];
          // var page_info_list = useOfflinePage();
          // var pages = page_info_list['pages'];
          // var cate_list = page_info_list['cate_list'];
          console.log('获取离线页面信息')
        }
        // 获取第一层子节点
        this.data_all = data['categroy'][0]['children'];
        // this.data_page = [pages,cate_list];
        this.data_page = pages;
        console.log('------',data);
        // console.log(this.data_all,'分类数据');
        // console.log(this.data_page,'页面数据');
      });
    },
  },
  created() {
    this.getData();
  },
};

</script>

<style scoped>
/* #categroy1{
  display: grid;
  width:300px;height:300px;
  overflow: scroll;
  overflow: auto;
  overflow-x: scroll;
  overflow-y: scroll;
} */
#menu>div{
  min-width: 140px;
  border-left: 1px solid greenyellow;
  border-right: 1px  solid greenyellow;
  padding: 0 5px 0 5px;
  margin: 0 auto;
}
#menu{
  display: flex;
  width: auto;
  overflow: auto;
}
.first_level_node{
  text-align: center;
  min-width: 100px;
}
.first_level_node>li{
  text-indent: -20%;
}
</style>